<template>
  <div class="page">
    <div class="head">
      <h1>集合石</h1>
    </div>
    <div class="panel">
      <div class="title">
        <h2>战场</h2>
      </div>
      <div class="data" v-if="result">
        <div class="item">
          <span>{{result.totalNum}}</span>
          <p>报名小猴</p>
        </div>
        <div class="item">
          <count-down :startTime="new Date().getTime()" :endTime="result.nextAtkTime" endText="对战中"></count-down>
          <p>下场战斗</p>
        </div>
        <router-link to="/unionmonkey" tag="div" class="item">
          <span>{{result.mineNum}}/{{result.limitNum}}</span>
          <p>我的小猴</p>
        </router-link>
      </div>
    </div>
    <div class="filter">
      <ul class="status">
        <li v-for="(item, index) in category" :class="{'active': index === status}" @click="changeCategory(index)" :key="index">{{item}}</li>
      </ul>
    </div>
    <div class="panel no-padding" v-if="status == 0">
      <div class="title">
        <h4>可掠夺榜</h4>
      </div>
      <x-table :cell-bordered="false" :content-bordered="false" class="rank">
        <thead>
          <tr>
            <th>#</th>
            <th>城堡</th>
            <th>掠夺收益</th>
            <th>占领收益</th>
            <th>占领时长</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in towerRank" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{item.castleName}}</td>
            <td>{{item.plunderProfit}}</td>
            <td>{{item.seizeProfit}}</td>
            <td>{{item.timeLog}}</td>
          </tr>
        </tbody>
      </x-table>
    </div>
    <div class="battle" v-if="status == 1">
      <div class="panel" v-for="(item,index) in 5" :key="'attack'+index">
        <p>2018年3月3日 12:21:32</p>
        <router-link tag="div" class="bat" :to="`/battle?id=`">
          <div class="attack">
            <img :src="`/static/warriors.jpg`" :style="{background: '#eafee1'}">
            <p>[攻]3232</p>
          </div>
          <div class="result">
            <img :src="`/static/result-1.svg`">
            <p>掠夺 3232猴毛<br>击杀 23 损失 32 俘虏 1</p>
          </div>
          <div class="defense">
            <img :src="'http://hp.miguan.in/tower/15.svg'" :style="{background: '#eafee1'}">
            <p>[防]甲乙</p>
          </div>
        </router-link>
      </div>
      <empty></empty>
    </div>
    <div class="rank-panel" v-if="status == 2">
      <div class="panel no-padding">
        <div class="title">
          <h4>玩家攻击排行</h4>
        </div>
        <x-table :cell-bordered="false" :content-bordered="false" class="rank">
          <thead>
            <tr>
              <th>#</th>
              <th>昵称</th>
              <th>战斗次数</th>
              <th>分值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in 5" :key="index">
              <td>{{ index + 1 }}</td>
              <td>甲一</td>
              <td>32323</td>
              <td>323233</td>
            </tr>
          </tbody>
        </x-table>
      </div>
      <div class="panel no-padding">
        <div class="title">
          <h4>玩家守城排行</h4>
        </div>
        <x-table :cell-bordered="false" :content-bordered="false" class="rank">
          <thead>
            <tr>
              <th>#</th>
              <th>昵称</th>
              <th>战斗次数</th>
              <th>分值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in 5" :key="index">
              <td>{{ index + 1 }}</td>
              <td>甲一</td>
              <td>32323</td>
              <td>323233</td>
            </tr>
          </tbody>
        </x-table>
      </div>
      <div class="panel no-padding">
        <div class="title">
          <h4>小猴攻击排行</h4>
        </div>
        <x-table :cell-bordered="false" :content-bordered="false" class="rank">
          <thead>
            <tr>
              <th>#</th>
              <th>ID</th>
              <th>战斗次数</th>
              <th>输出伤害</th>
              <th>承受伤害</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in 5" :key="index">
              <td>{{ index + 1 }}</td>
              <td>甲一</td>
              <td>32323</td>
              <td>323233</td>
              <td>323233</td>
            </tr>
          </tbody>
        </x-table>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    XTable
  } from 'vux'
  import empty from './common/empty.vue'
  import CountDown from './common/vue2-countdown.vue'
  export default {
    components: {
      XTable,
      empty,
      CountDown
    },
    data() {
      return {
        category: ['可掠夺榜', '战报', '排行榜', '我的战斗'],
        status: 0,
        result: null,
        towerRank: []
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.initData();
        this.canAttackList()
      });
    },
    methods: {
      changeCategory(index) {
        this.status = index
        switch (index) {
          case 0:
            this.canAttackList()
            break;
        case 1:
            this.canAttackList()
            break;
          default:
            break;
        }
      },
      initData() {
        this.$http
          .get(`/gameCastle/getMeetingStoneVo`)
          .then(res => {
            if (res.code == 200) {
              this.result = res.result;
            } else {}
          })
          .catch(function(error) {});
      },
      // 可掠夺榜
      canAttackList() {
        this.$http
          .get(`/gameCastle/getMeetingStoneCastle`)
          .then(res => {
            if (res.code == 200) {
              // this.result = res.result;
              this.towerRank = res.result
            } else {}
          })
          .catch(function(error) {});
        
      }
      
    },
  }
</script>

<style lang="scss" scoped>
  .data {
    display: flex;
    text-align: center;
    .item {
      width: 33.33%;
      span {
        color: $grey;
      }
    }
  }
  .filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 8px 12px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
  }
  .rank {
    margin-top: 12px;
    &:after {
      display: none;
    }
    td:before {
      display: none;
    }
    th:before {
      display: none;
    }
    a {
      color: $link;
    }
    font-size: 12px;
    color: #333;
    thead {
      background: #f8f8f8;
      color: $grey;
      cursor: pointer;
    }
    tr:nth-child(even) {
      background: #f8f8f8;
    }
  }
  .panel {
    h4 {
      padding-left: 12px;
      color: #799ac9;
    }
  }
  .no-padding {
    padding: 12px 0!important;
  }
  .battle {
    .panel {
      font-size: 14px;
      p {
        color: $gray;
      }
      .bat {
        display: flex;
        align-items: center;
        div {
          width: 33.33%;
          white-space: nowrap;
          overflow: hidden;
          text-align: center;
          p {
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        img {
          width: 60px;
          height: 60px;
        }
        .result {
          p {
            font-size: 12px;
          }
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }
  }
</style>
